<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//当前页
			let currentPage = 1;
			//每页显示条数
			let pageSize = 3;
			//总页数
			let totalPage = 0;
			//从数组的什么下标取数据
			/*
			  currentPage = 1
			  startRow = (1 - 1) * 3 = 0
			  endRow = 1 * 3 = 3
			  slice(0,3)
			  
			  currentPage = 2
			  startRow = (2 - 1) * 3 = 3
			  endRow = 2 * 3 = 6
			  slice(3,6)
			  
			*/
			function getUserList(currentPage, pageSize) {
				//开始
				let startRow = (currentPage - 1) * pageSize;
				//结束
				let endRow = currentPage * pageSize;
				let userList = localStorage.getItem("userlist");
				userList = $.parseJSON(userList);
				//总页数
				if (userList.length % pageSize != 0) {
					// totalPage = parseInt(userList.length / pageSize) + 1;
					totalPage = Math.ceil(userList.length / pageSize);
				} else {
					totalPage = parseInt(userList.length / pageSize);
				}


				//包括 begin，不包括end
				userList = userList.slice(startRow, endRow);

				let table1 = `<table class="table">`;
				let trs = ``;
				userList.forEach(function(val) {
					let tr = `<tr>
					<td id="userid">${val.id}</td>
					<td>${val.name}</td>
					<td>${val.email}</td>
					<td><button type="button" class="btn btn btn-danger delete">删除</button>
						<button type="button" class="btn btn-info edit">修改</button>
					</td>
				</tr>`
					trs += tr;
				})
				let table2 = `</table>`;
				$('.table-responsive').empty();
				$('.table-responsive').append(table1 + trs + table2);
			}
			// function getUserList(){
			// 	let userList = localStorage.getItem("userlist");
			// 	userList = $.parseJSON(userList);
			// }

			// function setUserList(){
			// 	localStorage.setItem("userlist", JSON.stringify(userList));
			// 	$('#addUserModal').modal('hide');
			// 	getUserList();
			// }
			$(document).ready(function() {
				let userId = 0;
				//用户列表
				getUserList(currentPage, pageSize);
				//保存用户
				$('#save').click(function() {
					const user = {
						id: Math.ceil((Math.random() * 10000)),
						name: $('#username').val(),
						email: $('#useremail').val()
					}
					let userList = localStorage.getItem("userlist");
					userList = $.parseJSON(userList);
					userList.push(user)
					localStorage.setItem("userlist", JSON.stringify(userList));
					$('#addUserModal').modal('hide');
					getUserList(currentPage, pageSize);
				})
				//删除模态框
				$(this).on('click', '.delete', function() {
					userId = $(this).parent().siblings('#userid').html();
					$('#delUserModal').modal('show');
				})
				$('#delUserModal').on('show.bs.modal',function(){
					$(this).find(".modal-dialog").css({
						'margin-left':100
					})
					
				});
				//删除
				$('#delok').click(function() {
					let userList = localStorage.getItem("userlist");
					userList = $.parseJSON(userList);
					let r = userList.filter(function(val) {
						return val.id != userId
					})
					localStorage.setItem("userlist", JSON.stringify(r));
					$('#delUserModal').modal('hide');
					getUserList(currentPage, pageSize);
				})
				//修改模态框
				$(this).on('click', '.edit', function() {
					let userList = localStorage.getItem("userlist");
					userList = $.parseJSON(userList);
					userId = $(this).parent().siblings('#userid').html();
					let user = userList.find(val => val.id == userId);
					$('#eusername').val(user.name);
					$('#euseremail').val(user.email);
					$('#editUserModal').modal('show');
				})
				//保存修改
				$('#editok').click(function() {
					let userList = localStorage.getItem("userlist");
					userList = $.parseJSON(userList);
					userList.forEach(function(val) {
						if (val.id == userId) {
							val.name = $('#eusername').val();
							val.email = $('#euseremail').val();
						}
					})
					localStorage.setItem("userlist", JSON.stringify(userList));
					$('#editUserModal').modal('hide');
					getUserList(currentPage, pageSize);
				})
				// 搜索
				$('.glyphicon-search').click(function() {
					let searchName = $('#searchName').val();
					if (searchName == null || searchName == "") {
						getUserList()
					} else {
						let userList = localStorage.getItem("userlist");
						userList = $.parseJSON(userList);
						let user = userList.find(val => val.name == searchName);

						let table1 = `<table class="table">`;
						let tr = `<tr>
							<td id="userid">${user.id}</td>
							<td>${user.name}</td>
							<td>${user.email}</td>
							<td><button type="button" class="btn btn btn-danger delete">删除</button>
								<button type="button" class="btn btn-info edit">修改</button>
							</td>
						</tr>`
						let table2 = `</table>`;
						$('.table-responsive').empty();
						$('.table-responsive').append(table1 + tr + table2);
					}
				})
				$('#next').click(function() {
					currentPage++;
					if (currentPage <= totalPage) {
						getUserList(currentPage, pageSize);
					} else {
						alert("已经是最后一页");
					}
				})
				$('#prev').click(function() {
					currentPage--;
					if (currentPage >= 1) {
						getUserList(currentPage, pageSize);
					} else {
						alert("已经是第一页");
					}
				})
			})
		</script>
	</head>
	<body>
		<form class="form-inline">
			<div class="form-group">
				<input type="text" class="form-control" id="searchName" placeholder="输入搜索用户姓名...">
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-primary glyphicon glyphicon-search"></button>
				<button type="button" class="btn btn-primary" data-toggle="modal"
					data-target="#addUserModal">添加用户</button>
			</div>
		</form>
		<div class="table-responsive">
		</div>
		<nav aria-label="Page navigation">
			<ul class="pagination">
				<li>
					<a href="#" aria-label="上一页" id="prev">
						<span aria-hidden="true">上一页</span>
					</a>
				</li>
				<li>
					<a href="#" aria-label="下一页" id="next">
						<span aria-hidden="true">下一页</span>
					</a>
				</li>
			</ul>
		</nav>
		<!-- 添加用户模态框 -->
		<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="username" class="control-label">用户姓名:</label>
								<input type="text" class="form-control" id="username">
							</div>
							<div class="form-group">
								<label for="useremail" class="control-label">用户邮箱:</label>
								<input class="form-control" id="useremail"></input>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="save">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 删除用户模态框 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="delUserModal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">删除用户</h4>
					</div>
					<div class="modal-body">
						确认删除吗?
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="delok">确定</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改用户模态框 -->
		<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">修改用户</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="eusername" class="control-label">用户姓名:</label>
								<input type="text" class="form-control" id="eusername" value="111">
							</div>
							<div class="form-group">
								<label for="euseremail" class="control-label">用户邮箱:</label>
								<input class="form-control" id="euseremail"></input>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="editok">保存</button>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>
